<template>
	<view class="digital-num-box" @click.stop="stopPropagation">
		<view
			class="digital-button minus"
			v-if="quantity > 0"
			:class="{ disabled: quantity <= min || disabled }"
			@click="reduce"
		></view>
		<view v-if="quantity > 0" class="num">{{ quantity }}</view>
		<view class="digital-button plus" :class="{ disabled: quantity >= max || disabled }" @click="add"></view>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"

const props = defineProps({
	value: {
		type: Number,
		default: 0,
	},
	min: {
		type: Number,
		default: 0,
	},
	max: {
		type: Number,
		default: 999,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
})
const quantity = ref(0)
const commonStore = useCommonStore()
const emit = defineEmits(["increase", "decrease", "numChange", "update:value"])
watch(
	() => props.value,
	(val) => {
		quantity.value = val || 0
	},
	{
		immediate: true,
	}
)
const reduce = () => {
	if (quantity.value <= props.min || props.disabled) {
		return false
	}
	emit("decrease")
	numChange(--quantity.value)
}
const add = () => {
	if (quantity.value >= props.max || props.disabled) {
		return false
	}
	emit("increase")
	numChange(++quantity.value)
}
const numChange = (val: number) => {
	emit("numChange", val)
	emit("update:value", val)
}
const stopPropagation = (e: any) => {
	e.stopPropagation()
}
</script>
<style scoped lang="scss">
.digital-num-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48rpx;
	position: relative;
	vertical-align: middle;
	.digital-button {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
		height: 48rpx;
		width: 48rpx;
		cursor: pointer;
		&.plus {
			text-align: center;
			&:before {
				content: "";
				height: 48rpx;
				width: 48rpx;
				background-image: url("#{$imgBaseUrl}plus.png");
				background-repeat: no-repeat;
				background-size: cover;
			}
		}
		&.disabled {
			&.plus {
				&:before {
					background-image: url("#{$imgBaseUrl}plus-disabled.png");
				}
			}
		}
		&.minus {
			text-align: center;
			&:before {
				content: "";
				height: 48rpx;
				width: 48rpx;
				background-image: url("#{$imgBaseUrl}minus.png");
				background-repeat: no-repeat;
				background-size: cover;
			}
		}
		&.disabled {
			&.minus {
				&:before {
					background-image: url("#{$imgBaseUrl}minus-disabled.png");
				}
			}
		}
	}
	.num {
		width: 66rpx;
		text-align: center;
		font-size: 28rpx;
		color: $c-black-_9;
	}
}
.prevent-popup {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>
